<template>
  <view>
    <view class="main">
      <view class="cell">
        <view class="left"> 所属栏目 </view>
        <view class="right">
          <text>{{ activeInfo?.name || "请选择栏目" }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <u-picker :show="show" keyName="name" :columns="fileList" @cancel="show = false" @confirm="selectClick"></u-picker>
      <view class="scBox">
        <view class="tit">上传图片</view>
        <view class="imgBox">
          <view class="empty" v-for="(item, index) in picList" :key="index">
            <image
              v-if="isImageOrVideo(item.path) === 'image'"
              @click="
                TanPreviewImage(
                  picList.map((i: any) => i.url),
                  index
                )
              "
              :src="item.url"
              mode="aspectFill"
            />
            <video v-if="isImageOrVideo(item.path) === 'video'" :show-play-btn="true" :show-fullscreen-btn="true" :src="item.url"></video>
            <view class="closeBox" @click="closeFn(index)">
              <u-icon name="close"></u-icon>
            </view>
          </view>

          <view class="imgBox1" @click="chooseMediaFn">
            <u-icon name="photo" size="28" color="#aaaaaa"></u-icon>
            <view>图片/视频</view>
          </view>
        </view>
      </view>
      <view class="scBox">
        <view class="tit">发布动态</view>
        <u-textarea style="margin-top: 46rpx" v-model="formData.introduce" height="50" maxlength="200" border="none" placeholder="在这里分享你的想法..." count></u-textarea>
      </view>
      <view class="bottomBox">
        <u-button @click="submit" shape="circle" text="立即发布" color="#81d8d0"></u-button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { isImageOrVideo, TanPreviewImage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
const fileList = ref<any[]>([]);
const show = ref(false);
const picList = ref<any[]>([]);

const formData = ref({
  folderId: "",
  fileId: [],
});
const activeInfo = ref();
const selectClick = (info: any) => {
  console.log(info);
  formData.value.folderId = info.value[0].id;
  activeInfo.value = info.value[0];
  show.value = false;
};
const closeFn = (index: number) => {
  picList.value.splice(index, 1);
};
const chooseMediaFn = () => {
  uni.chooseMedia({
    mediaType: ["image", "video"],
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFiles;
      console.log(res);
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_CLOUDUPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i].tempFilePath,
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes, "uploadFileRes");
            picList.value.push(JSON.parse(uploadFileRes.data).data);
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
          fail(err) {
            console.log("上传：" + err);
          },
        });
      }
    },
    fail(err) {
      console.log("chooseMedia" + JSON.stringify(err));
    },
  });
};
const showPic = () => {
  show.value = true;
};
const submit = async () => {
  if (picList.value.length <= 0) {
    uni.showToast({
      title: "请上传图片/视频",
      icon: "none",
    });
    return;
  }
  formData.value.fileId = picList.value.map((item) => item.id) as never[];
  uni.showToast({
    title: "操作成功",
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 200);
};
</script>
<style lang="less" scoped>
.cell {
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 32rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  .left {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #000000;
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #aaaaaa;
    image {
      width: 80rpx;
      height: 80rpx;
      margin: 0 20rpx;
      background: saddlebrown;
    }
  }
}
.scBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-top: 30rpx;
  .tit {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  .empty {
    width: 31%;
    height: 212rpx;
    border-radius: 8rpx;
    position: relative;
    image,
    video {
      width: 100%;
      height: 100%;
    }
  }
  .closeBox {
    position: absolute;
    right: 5rpx;
    top: 5rpx;
  }
  .imgBox1 {
    width: 31%;
    height: 212rpx;
    border-radius: 8rpx;
    background: #eeeeee;
    font-size: 28rpx;
    color: #aaaaaa;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
